<template>
  <div class="ano-panel ano-arts">
    <AnoPanelHd 
      :hasBackBtn="true" 
      title="选择艺术图"
      @onBack="handleConfirm"
      @onClose="handleConfirm" />

    <div class="panel-bd">
      <ul class="list">
        <li class="item" 
          v-for="item in colors" 
          :key="item.value" 
          @click="handleSelect(item)">
            <img src="../../../assets/imgs/custom_item_1.png" alt="img">
          </li>
      </ul>
    </div>
  </div>
</template>

<script>
import AnoPanelHd from './anoPanelHd.vue'

export default {
  name: 'anoArtPanel',
  components: {
    AnoPanelHd
  },
  props: {
    imageInfo: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      colors: [
        { value: '宋体'},
        { value: '微软雅黑'},
        { value: '微软雅黑1'},
        { value: '微软雅黑2'},
        { value: '微软雅黑3'},
        { value: '微软雅黑4'},
        { value: '微软雅黑5'},
        { value: '微软雅黑6'},
        { value: '微软雅黑7'},
        { value: '微软雅黑8'},
        { value: '微软雅黑9'},
      ],
      
      formData: {
        text: '',
        fontFamily: '',
        fontSize: 200,
        fontColor: '',
        colorR: '100',
        colorG: '100',
        colorB: '100',
        outLine: false,
        outlineColor: '',
        outLineR: '100',
        outLineG: '100',
        outLineB: '100',
        outLineSize: 8,
        hide: false,
        angle: 0,
      },
    }
  },
  created() {
    console.log(22)
  },
  methods: {
    handleSelect(item) {
      console.log(this.imageInfo, '---handleSelect art')
      if (this.imageInfo.type) {
        this.$emit('designChange', this.formData)
        return;
      }
      this.$emit('designAdd', this.formData)
    },
    handleConfirm() {
      this.$emit('confirm')
    }
  }
}
</script>

<style lang="less" scoped>
.ano-arts {
  .list {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    text-align: center;
    padding: 10px;
    .item {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 180px;
      height: 160px;
      margin-bottom: 15px;
      cursor: pointer;
      user-select: none;
    }
  }
 }
</style>
